import { Component } from 'react'


class TodoList extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.state = {
            itemText: "",
            list: []
        }

    }
    handleChange(event) {
        this.setState({
            itemText: event.target.value
        })
        // console.log(this.state.itemText)
    }
    handleSubmit() {
        // console.log(this.state.itemText)
        this.setState({
            list: [...this.state.list, this.state.itemText],
            itemText: ""
        })
        // console.log(this.state.list)
    }
    render() {
        const todoListHtml = this.state.list.map((item, index) => <li key={index}>{item}</li>)
        return (
            <div className="todo">
                <h1>Todo</h1>
                {/* react 单项数据流 */}
                <input
                    type="text"
                    value={this.state.itemText}
                    onChange={this.handleChange}
                />
                <button onClick={this.handleSubmit}>Add</button>

                <ol>
                    {this.state.list.length === 0 && "暂无数据"}
                    {todoListHtml}

                </ol>
                <hr />
                <ul>
                    {this.state.list.length == 0 ?
                        "暂无数据" : todoListHtml}
                </ul>
                <hr />
                <ul>
                    {this.state.list.length === 0 && "暂无数据"}
                    {this.state.list.map((item,index) => {
                        return <li key={index}>{item}</li>
                    })}
                </ul>

            </div>
        )
    }
}

export default TodoList